<!DOCTYPE html>
<html>
<head>
	<title>用户列表</title>
	<meta charset="utf-8">
	<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
	      name="viewport"/>

	<!-- 所有的 css 资源 -->
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="../../res/sa.css" rel="stylesheet">

	<!-- 所有的 js 资源 -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>

	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="../../res/kj/laydate/laydate.js"></script>
	<script src="../../res/sa.js"></script>

	<style type="text/css">

	</style>

</head>
<body>

<!-- 防止margin向下击穿 -->
<div style="margin-top: -1em;"><br></div>

<div :style="'display: block;'" class="vue-box" style="display: none;">
	<!-- 参数栏 -->
	<div class="c-panel">
		<div class="c-title">检索参数</div>
		<el-form ref="form">
			<div class="c-item" style="min-width: 0px;">
				<el-button @click="f5" icon="el-icon-search" size="mini" type="primary">查询</el-button>
			</div>
			<div class="c-item" style="min-width: 0px;">
				<el-button @click="newUser()" size="mini" type="primary">新增用户</el-button>
			</div>
		</el-form>
	</div>
	<!-- 数据栏 -->
	<div class="c-panel">
		<div class="c-title">列表</div>
		<el-table :data="dataList" class="data-table" size="mini" style="width: 100%">

			<el-table-column label="编号" type="index" width="70px"></el-table-column>
			<el-table-column label="用户名" prop="name" width="200px">
				<template slot-scope="scope">
					<div style="float: left; width: 130px; line-height: 20px;">
						<b>{{scope.row.name}}</b>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<span style="color: green;" v-if="scope.row.baned == false">正常</span>
					<span style="color: red;" v-if="scope.row.baned == true">禁用</span>
				</template>
			</el-table-column>
			<el-table-column label="是否锁定">
				<template slot-scope="scope">
					<span style="color: green;" v-if="scope.row.lock == false">未锁定</span>
					<span style="color: red;" v-if="scope.row.lock == true">锁定</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" prop="address">
				<template slot-scope="scope">
					<el-button @click="rolemanage(scope.row)" class="c-button" icon="el-icon-edit" type="primary">管理角色
					</el-button>
					<el-button @click="dongjie(scope.row)" class="c-button" icon="el-icon-edit" type="primary"
					           v-if="scope.row.baned == false && scope.row.lock == false">禁用
					</el-button>
					<el-button @click="jiejin(scope.row)" class="c-button" icon="el-icon-edit" type="primary"
					           v-if="scope.row.baned == true && scope.row.lock == false">解禁
					</el-button>
					<el-button @click="del(scope.row)" class="c-button" icon="el-icon-delete" type="danger"
					           v-if="scope.row.lock == false">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div class="page-box">
			<el-pagination :current-page.sync="page.pageNum"
			               :page-size.sync="page.pageSize"
			               :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
			               :total="page.count"
			               @current-change="f5(true)"
			               @size-change="f5(true)"
			               background
			               layout="total, prev, pager, next, sizes, jumper">
			</el-pagination>
		</div>
	</div>
</div>

<script type="text/javascript">
    window.app = new Vue({
        el: '.vue-box',
        data: {
            p: {	// 查询参数
                username: '',
            },
            page: {	// 分页信息
                pageNum: 1,
                pageSize: 10,
                count: 1,
            },
            dataList: null
        },
        methods: {
            // 数据刷新
            f5: function () {
                sa.get("/user/list", {
                    pagesize: this.page.pageSize,
                    pagenum: this.page.pageNum
                }, function (res) {
                    if (res && res.state && res.data) {
                        this.dataList = res.data.data;
                        this.page.count = res.data.count;
                    }
                }.bind(this))
            },
            newUser: function () {
                layer.open({
                    type: 2,
                    title: '新增用户',
                    shadeClose: false,
                    shade: 0.8,
                    area: ['40%', '50%'],
                    content: 'user-add.html',
                });
            },
            // 分页刷新
            pageNo_f5: function (pageNo) {
                this.$message('切换当前页：' + pageNo);
                this.f5();
            },
            pageSize_f5: function (pageSize) {
                this.$message('切换页大小：' + pageSize);
                this.f5();
            },
            // 删除
            del: function (data) {
                layer.confirm('是否删除，此操作不可撤销', {}, function () {
                    sa.delete('/user', JSON.stringify(data), function (res) {
                        if (res && res.state && res.data) {
                            layer.msg('删除成功');
                            this.f5();
                        }
                    }.bind(this))
                }.bind(this));
            },
            // 账号冻结
            dongjie: function (data) {
                layer.confirm('冻结此用户？', {}, function () {
                    sa.put('/user/ban', JSON.stringify(data), function (res) {
                        if (res && res.state && res.data) {
                            layer.msg('冻结成功');
                            this.f5();
                        }
                    }.bind(this))
                }.bind(this));
            },
            // 解禁
            jiejin: function (data) {
                layer.confirm('解禁此用户？', {}, function () {
                    sa.put('/user/unban', JSON.stringify(data), function (res) {
                        if (res && res.state && res.data) {
                            layer.msg('解禁成功');
                            this.f5();
                        }
                    }.bind(this))
                }.bind(this));
            },
            //管理角色
            rolemanage: function (data) {
                layer.open({
                    type: 2,
                    title: '管理用户 [' + data.name + '] 的角色',
                    shadeClose: false,
                    shade: 0.8,
                    area: ['50%', '50%'],
                    content: 'role-setup.html?userid=' + data.id
                });
            }
        },
        mounted: function () {
            this.f5();
        }
    });

</script>


</body>
</html>
